前言

在学习JS的面对对象的时候遇到一些疑惑，原因在于事先学习过C#的面对对象，因此在学习JS面对对象时候总喜欢把二者放在一起参考学习，因此经常会有疑惑，因为二者的面对对象相差很大。在网上找过很多资料看过很多观点之后，来写一写自己的理解吧。

很多人说JavaScript并非“面向对象的语言”，而是“基于对象的语言”，甚至东哥也是这样给我解惑的，但是我在问 “如何定义面向对象和基于对象” 时，东哥给我的回复我觉的并不能打消我的疑惑。

JavaScript标准对基于对象的定义的具体内容是：“语言和宿主的基础设施由对象来提供，并且JavaScript程序即是一系列互相通讯的对象集合”。我觉得这里并不是表达弱化的面向对象的意思，反而是表达对象对于语言的重要性。

什么是面对对象

Object（对象）在英文中，是一切事物的总称，和面向对象编程的抽象思维有互通之处。

在《面向对象分析与设计》Grady Booch总结为，从人类的认知角度来说，对象应该是下列事物之一：

  1. 一个可以触摸或者可以看见的东西；
  2. 人的智力可以理解的东西；
  3. 可以指导思考或行动（进行想象或施加动作）的东西。

有了对象的自然定义后，我们就可以描述编程语言中的对象了。在不同的编程语言中，设计者也利用各种不同的语言特性来抽象描述对象，最为常见的就是使用“类”的方式来描述对象，如Java、C#等。

JavaScript的面对对象

而 JavaScript 早年却选择了一个更为冷门的方式：原型。同时因为一些公司政治原因，JavaScript推出之时受管理层之命被要求模仿Java，因此，JavaScript创始人Brendan Eich在“原型运行时”的基础上引入了new、this等语言特性，使之“看起来更像Java”。

在 ES6 之前，大量的 JavaScript 程序员试图在原型体系的基础上，把JavaScript变得更像是基于类的编程。

如果从运行时角度来谈论对象，就是在讨论JavaScript实际运行中的模型，这是由于任何代码执行都必定绕不开运行时的对象模型。幸运的是，从运行时的角度看，可以不必受到“基于类”的困扰，这是因为任何语言运行时类的概念都是被弱化的。

JavaScript 对象的特征

如果看了Grandy Booch《面向对象分析与设计》从而了解了对象的本质特征，那么对象有一下几个特点：

  • 对象具有唯一标识性：即使完全相同的两个对象，也并非同一个对象。
  • 对象有状态：对象具有状态，同一对象可能处于不同状态之下。
  • 对象具有行为：即对象的状态，可能因为它的行为产生变迁。

对象具有唯一标识性，各种语言的对象唯一标识性都是用内存地址来体现的， 对象具有唯一标识的内存地址，所以具有唯一的标识。因此任何不同的JavaScript对象其实是互不相等的。如下面代码中，，o1和o2初看是两个一模一样的对象，但是打印出来的结果却是false。

1
2
3
var o1 = { a: 1 };
var o2 = { a: 1 };
console.log(o1 == o2); // false

关于对象的第二个和第三个特征“状态和行为”，C# 中则称它们为“属性”和“方法”。但是，在 JavaScript中，将状态和行为统一抽象为“属性”，考虑到 JavaScript 中将函数设计成一种特殊对象，所以 JavaScript中的行为和状态都能用属性来抽象。

如下面这段代码，就展示了普通属性和函数作为属性的一个例子，其中o是对象，d是一个属性，而函数f也是一个属性，尽管写法不太相同，但是对JavaScript来说，d和f就是两个普通属性。

1
2
3
4
5
6
var o = { 
      d: 1,
      f() {
          console.log(this.d);
      }    
  };

总结一句话来看，在JavaScript中，对象的状态和行为其实都被抽象为了属性，尽管设计思路和C#、Java有一定差别，但是二者都很好地表现了对象的基本特征：标识性、状态和行为。

JavaScript对象特色

在实现了对象基本特征的基础上，JavaScript中对象独有的特色是：对象具有高度的动态性，这是因为JavaScript赋予了使用者在运行时为对象添改状态和行为的能力。因此，JavaScript对象的具体设计：具有高度动态性的属性集合。

比如，JavaScript 允许运行时向对象添加属性，这就跟绝大多数基于类的、静态的对象设计完全不同。

下面这段代码就展示了运行时如何向一个对象添加属性，一开始我定义了一个对象o，定义完成之后，再添加它的属性b，这样操作是完全没问题的。

1
2
3
var o = { a: 1 };
o.b = 2;
console.log(o.a, o.b); //1 2

为了提高抽象能力，JavaScript的属性被设计成比别的语言更加复杂的形式，它提供了数据属性和访问器属性（getter/setter）两类。

JavaScript对象的两类属性

对JavaScript来说，属性并非只是简单的名称和值，JavaScript用一组特征（attribute）来描述属性（property）。

先来说第一类属性，数据属性。它比较接近于其它语言的属性概念。数据属性具有四个特征。

  • value：就是属性的值。
  • writable：决定属性能否被赋值。
  • enumerable：决定for in能否枚举该属性。
  • configurable：决定该属性能否被删除或者改变特征值。

在大多数情况下，我们只关心数据属性的值即可。

第二类属性是访问器（getter/setter）属性，它也有四个特征。

  • getter：函数或undefined，在取属性值时被调用。
  • setter：函数或undefined，在设置属性值时被调用。
  • enumerable：决定for in能否枚举该属性。
  • configurable：决定该属性能否被删除或者改变特征值。

访问器属性使得属性在读和写时执行代码，它允许使用者在写和读属性时，得到完全不同的值，它可以视为一种函数的语法糖。

我们通常用于定义属性的代码会产生数据属性，其中的writable、enumerable、configurable都默认为true。我们可以使用内置函数 Object.getOwnPropertyDescripter来查看，如以下代码所示：

1
2
3
4
5
var o = { a: 1 };
o.b = 2;
//a和b皆为数据属性
Object.getOwnPropertyDescriptor(o,"a") // {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(o,"b") // {value: 2, writable: true, enumerable: true, configurable: true}

我们在这里使用了两种语法来定义属性，定义完属性后，我们用JavaScript的API来查看这个属性，我们可以发现，这样定义出来的属性都是数据属性，writeable、enumerable、configurable都是默认值为true。

如果我们要想改变属性的特征，或者定义访问器属性，我们可以使用 Object.defineProperty，示例如下：

1
2
3
4
5
6
7
var o = { a: 1 };
Object.defineProperty(o, "b", {value: 2, writable: false, enumerable: false, configurable: true});
//a和b都是数据属性，但特征值变化了
Object.getOwnPropertyDescriptor(o,"a"); // {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(o,"b"); // {value: 2, writable: false, enumerable: false, configurable: true}
o.b = 3;
console.log(o.b); // 2

这里我们使用了Object.defineProperty来定义属性，这样定义属性可以改变属性的writable和enumerable。

我们同样用Object.getOwnPropertyDescriptor来查看，发现确实改变了writable和enumerable特征。因为writable特征为false，所以我们重新对b赋值，b的值不会发生变化。

在创建对象时，也可以使用 get 和 set 关键字来创建访问器属性，代码如下所示：

1
2
3
4
var o = { get a() { return 1 } };

console.log(o.a); // 1
//注意，访问访问器属性和访问数据属性一致，不用加（）

访问器属性跟数据属性不同，每次访问属性都会执行getter或者setter函数。这里我们的getter函数返回了1，所以o.a每次都得到1。

这样，我们就理解了，实际上JavaScript 对象的运行时是一个“属性的集合”，属性以字符串或者Symbol为key，以数据属性特征值或者访问器属性特征值为value。

对象是一个属性的索引结构（索引结构是一类常见的数据结构，我们可以把它理解为一个能够以比较快的速度用key来查找value的字典）。我们以上面的对象o为例，你可以想象一下“a”是key。

{writable:true,value:1,configurable:true,enumerable:true}是value。以前写的JS数据类型已经介绍了Symbol类型，能够以Symbol为属性名，这也是JavaScript对象的一个特色。

总结

追本溯源，以面对对象的基本原则和面对对象的基本特征来看，JavaScript只是与主流的Java、C++等面对对象语言采用了不同的设计思路，这样的对象系统设计虽然特别，但是JavaScript提供了完全运行时的对象系统，这使得它可以模仿多数面向对象编程范式，所以它也是正统的面向对象语言。

如果想完全理解JavaScript对象，不能以Java、C#这些“基于类的面向对象”相关的知识，回到人类对对象的朴素认知和面向对象的语言无关基础理论，我们就能够理解JavaScript面向对象设计的思路。